<template>

  <el-dialog 
            v-model="tianjia" 
            :title="timu" 
            width="90%" 
            :close-on-click-modal="false"
            @close="resetForm"
          >
              <div class="ti">
              <el-form :model="forms" :rules="rules" ref="formRef">
                <el-row :gutter="20">
                  <!-- 题目类型 -->
                  <el-col :span="6">
                    <el-form-item label="题目类型  :"   :label-width="formLabelWidth" prop="subjectType">
                      <el-select v-model="forms.subjectType" @click="hc()" placeholder="选择题目类型">
                        <el-option
                          v-for="nan in xuanze"
                          :key="nan.value"
                          :label="nan.nanName"
                          :value="nan.nanId"
                        />
                      </el-select>
                      <!-- 显示选择的题目类型标签 -->
                      <!-- <div style="margin-top: 10px;">
                        <el-tag 
                          v-for="option in selectedOption" 
                          :key="option.value" 
                          closable 
                          @close="removeTag(option)"
                          style="margin-right: 5px;"
                        >
                           {{ option.label }}  
                        </el-tag>
                      </div> -->
                    </el-form-item>
                  </el-col>
  
                  <!-- 题目标签 -->
                  <el-col :span="6">
                    <el-form-item label="题目标签  :" :label-width="formLabelWidth" prop="subjectLabel">
                      <el-select v-model="labelsString" multiple placeholder="选择题目标签" @change="handleChange">
                         <el-option
                          v-for="item in subjectLabel"
                          :key="item.labelId"
                          :label="item.labelName"
                          :value="item.labelId"
                        />
                      </el-select>
                      <!-- 显示选择的题目类型标签 -->
                      <!-- <div style="margin-top: 10px;">
                        <el-tag 
                          v-for="option in selectedOption" 
                          :key="option.value" 
                          closable 
                          @close="removeTag(option)"
                          style="margin-right: 5px;"
                        >
                           {{ option.label }}  
                        </el-tag>
                      </div> -->
                    </el-form-item>
                  </el-col>
  
                  <!-- 选择班级 -->
                  <el-col :span="6">
                    <el-form-item label="专业名称 :" prop="subjectMajor" :label-width="formLabelWidth">
                      <el-select v-model="forms.subjectMajor" placeholder="选择专业">
                         <el-option
                          v-for="item in zhaun"
                          :key="item.value"
                          :label="item.directionName"
                          :value="item.directionId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
  
                   <!-- 选择试题难度 -->
                  <el-col :span="6">
                    <el-form-item label="试题难度 :" prop="subjectLv" :label-width="formLabelWidth">
                      <el-select v-model="forms.subjectLv" placeholder="选择难度">
                         <el-option
                          v-for="nan in lxData"
                          :key="nan.value"
                          :label="nan.nanName"
                          :value="nan.nanId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
  
  
  
                </el-row>
                <el-row :gutter="20"> 
                <el-col :span="12">
                <el-form-item label="题目名称  :"   prop="subjectName" :label-width="formLabelWidth"  >
                  <el-input type="textarea" :rows="2" v-model="forms.subjectName" autocomplete="off" placeholder="请输入题目名称"/>
                </el-form-item>
              </el-col>
              </el-row>
                 <div v-if="forms.subjectType == 2 || forms.subjectType == 1  || forms.subjectType == '单选题'  || forms.subjectType == '多选题' ">
                  <el-row :gutter="24"> 
                    <el-col :span="12">
                      <el-form-item label="选项A  :" prop="optionA" :label-width="formLabelWidth">
                        <el-input type="textarea" :rows="2" v-model="forms.optionA" autocomplete="off" placeholder="请输入选项A"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="选项B :" prop="optionB" :label-width="formLabelWidth">
                        <el-input type="textarea" :rows="2" v-model="forms.optionB" autocomplete="off" placeholder="请输入选项B"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="选项C  :" prop="optionC" :label-width="formLabelWidth">
                        <el-input type="textarea" :rows="2" v-model="forms.optionC" autocomplete="off"  placeholder="请输入选项C"/>
                      </el-form-item>
                    </el-col>
                    
                    <el-col :span="12">
                      <div style="width: 100%; height: 10px; margin-left: 10px; ">
                      <el-form-item label="选项D  :" prop="optionD" :label-width="formLabelWidth">
                        <el-input type="textarea" :rows="2" v-model="forms.optionD" autocomplete="off"  placeholder="请输入选项D"/>
                      </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <div v-if="forms.subjectType == 1  || forms.subjectType == '多选题' ">
                    <el-row :gutter="24">
                      <el-col :span="12">
                        <el-form-item label="选项E  :" prop="E" :label-width="formLabelWidth">
                          <el-input type="textarea" :rows="2" v-model="forms.optionE" autocomplete="off" placeholder="请输入选项E" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="选项F  :" prop="F" :label-width="formLabelWidth">
                          <el-input type="textarea" :rows="2" v-model="forms.optionF" autocomplete="off" placeholder="请输入选项F" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div v-if="forms.subjectType == 0   || forms.subjectType == '判断题' ">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="正确  :" prop="optionA" :label-width="formLabelWidth" >
                  <el-input type="textarea" :rows="2" v-model="forms.optionA" autocomplete="off" placeholder="请输入正确的答案"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="错误  :" prop="optionB" :label-width="formLabelWidth">
                  <el-input type="textarea" :rows="2" v-model="forms.optionB" autocomplete="off" placeholder="请输入错误的答案"/>
                </el-form-item>
              </el-col>
            </el-row>
            </div>
                <el-row :gutter="20"> 
                <el-col :span="12">
                  <el-form-item label="题目答案 :"   prop="subjectAnswer" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="2" v-model="forms.subjectAnswer" autocomplete="off" placeholder="请输入题目答案数" />
                  </el-form-item>
                </el-col>
                </el-row>
        <div class="tu">
    <el-form-item label="图片 :" :label-width="formLabelWidth">            
      <el-upload 
        ref="uploadRef" 
        action="/api/user/upload" 
        :show-file-list="false"
        :on-success="uploadSuccess"
        :headers="{'Authorization': usertonken.token}"
        :before-upload="beforeAvatarUpload"
      >
        <div class="tt">
          <img v-if="subjectImage" :src="subjectImage" class="avatar-uploader" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
            </el-icon>
          </div>
        </el-upload>
        </el-form-item>
          </div>
              </el-form>
              </div>
              <!-- 按钮 -->
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="quxiao">取消</el-button>
                  <el-button type="primary" @click="quer">
                    确认
                  </el-button>
                </div>
              </template>
            </el-dialog>
    <div  v-loading="loading">
      <div v-loading="loading" v-if="sysSubiect.length > 0">
      <div v-for="(item, index) in sysSubiect" :key="index" class="common-course-Quest-item">
        <div class="common-course-Quest-item-left">
                <div class="common-course-Quest-item-ti">
                  <div class="common-course-Quest-item-title">
                  题型：<div v-if="item.subjectType == 2">单选题</div>
                  <div v-if="item.subjectType == 1">多选题</div>
                  <div v-if="item.subjectType == 0">判断题</div>
                </div>
                <div class="common-course-Quest-item-title">
                  专业： <div>{{ item.direction.directionName }}</div>
                </div>
                <div class="common-course-Quest-item-title">
                  难度：<div>
                    <el-rate class="el-rate"
                      v-model="item.subjectLv"
                      disabled
                      :max="3"
                      text-color="#ff9900">
                    </el-rate>
                    </div>
                </div>
                <div class="common-course-Quest-item-title">
                  <div>答案：{{ item.subjectAnswer }}</div>
                </div>
                <div class="common-course-Quest-item-title" v-if="item.sysSubjectLabel && item.sysSubjectLabel.length > 0">
                  <div>知识点：</div>
                  <div v-for="(xx,index) in item.sysSubjectLabel" :key="index" class="common-course-Quest-item-title_point">
                    <div>{{ xx.labelName }}</div>
                  </div>
                  
                </div>
                
                </div>
                
                <div class="common-course-Quest-item-title_caozuo">
                  <el-button type="primary" plain @click="xiugai(item)">修改</el-button>
                <el-button type="danger" plain @click="shan(item.subjectId)">删除</el-button>
                </div>
                
              </div>
              <div  class="separator"></div>
              <div>
                <div class="common-course-Quest-item-title_ti"><span>题目：</span>{{ item.subjectName }}</div>
                <div class="common-course-Quest-item-option">
                  <div class="option-container">
                    <div v-if="item.optionC === null||item.optionC == ''">
                       <div class="option-letter" style="font-weight: lighter;">{{item.optionA  }}</div>
                       <div class="option-text" style="font-weight: lighter;">{{item.optionB  }}</div>
                    </div>
                    <div v-if="item.optionC != null&&item.optionC!=''">
                      <div class="option-letter" style="font-weight: lighter;">{{item.optionA ? 'A. ' + item.optionA : ''  }}</div>
                      <div class="option-text" style="font-weight: lighter;">{{item.optionB ? 'B. ' + item.optionB : ''  }}</div>
                    </div>
                   
                    <div class="option-text" style="font-weight: lighter;">{{item.optionC ? 'C. ' + item.optionC : ''  }}</div>
                    <div  class="option-text" style="font-weight: lighter;">{{item.optionD ? 'D. ' + item.optionD : ''  }}</div>
                    <div  class="option-text" style="font-weight: lighter;">{{item.optionE ? 'E. ' + item.optionE : '' }}</div>
                    <div  class="option-text" style="font-weight: lighter;">{{item.optionF ? 'F. ' + item.optionF : ''  }}</div>
                  </div>
                  <div v-if="item.subjectImage != null">
                  <div class="tupian">
                    <el-image :src= item.subjectImage style="width: 300px; height: 300px;" :preview-src-list="[item.subjectImage]"></el-image></div>
                </div>
                </div>
              </div>
              <div class="separator01"></div>
              <div class="fabu">
                <div class="fabuxinxi">
                  <div v-if="item.user!=null">发布人:{{ item.user.nickName }}</div>
                </div>
                <div class="fabuxinxi">
                  <div>发布时间:{{ item.createtime }}</div>
                </div>
                <div class="fabuxinxi">
                  <div v-if="item.reviser != null">修改人:{{ item.reviser }}</div>
                </div>
                <div class="fabuxinxi">
                  <div v-if="item.changetime != null">修改时间:{{ item.changetime }}</div>
                </div>
              </div>
            </div>
    </div>
    <div v-else>
      <div class="wushuju">{{ shuju }}</div>
    </div>
    </div>
   
    
  
            <!-- 分页条 -->
          <el-pagination
          v-model:current-page="pageNum" 
          v-model:page-size="pageSize" 
          :page-sizes="[5, 10 ,15, 20]"
          layout="jumper, total, sizes, prev, pager, next" background 
          :total="total" @size-change="onSizeChange"
          @current-change="onCurrentChange" 
          style="margin-top: 20px; 
          justify-content: flex-end" />
  </template>
  <script setup>
  import { ref, reactive,defineProps, watch,onMounted,computed,onUpdated } from 'vue'
  import {selectSingleChoice,selectSubjectByLabelId} from '@/api/QuestionBankManagement/AllQuestionTypes'
  import {selectSubjectLabel,selectSubjectMajor,addSubject,updateSubject,deleteSubject} from '@/api/subject'
  import { ElTag } from 'element-plus';
  import { data } from 'jquery';
  import { useUserInfoStore } from "@/store/user.js";
  import { select } from '@/api/common/work/work';
  import { ElMessage,ElMessageBox } from 'element-plus';
  import { useTokenStore } from '@/store/token';
  
  const subjectImage=ref();
  
  const usertonken=useTokenStore()
  
  //图片上传成功的回调
  const uploadSuccess = (response, file) => {
    // 回显图片
    subjectImage.value = URL.createObjectURL(file.raw);
    forms.value.subjectImage = response.data; // 假设服务器返回的是图片URL
  };
  // 修改图片
  const updatePicOne = async () => {
    let result = await updatePicService(imageUrl.value)
    if (result.code == 200) {
      // 更新 pinia 中的图片
      userInfoStore.userInfo.userAvatar = imageUrl.value
      ElMessage.success('修改成功')
    } else {
      ElMessage.error('修改失败')
    }
  }
  
  //弹窗标题模型
  const timu = ref("")
  
  // 修改按钮点击事件
  const xiugai = (item) => {
    selectSubjectLabelList();
    selectSubjectMajorList();
    tianjia.value = true;
    timu.value = "修改题目";
    
    // 直接将题目对象的值赋给 forms.value
    forms.value = { ...item };
    subjectImage.value = forms.value.subjectImage;
  
    // 将题目类型编号转换为名称
    const st = item.subjectType;
    switch(st) {
      case 0: 
        forms.value.subjectType = "判断题";
        break;
      case 1: 
        forms.value.subjectType = "多选题";
        break;
      case 2: 
        forms.value.subjectType = "单选题";
        break;
    }
  
    // 将难度编号转换为名称
    const nd = item.subjectLv;
    switch(nd) {
      case 1: forms.value.subjectLv = "低"; break;
      case 2: forms.value.subjectLv = "中"; break;
      case 3: forms.value.subjectLv = "高"; break;
    }
  
    // 将标签字符串转换为数字数组并赋值给 forms.value.subjectLabel
    if (Array.isArray(item.subjectLabel)) {
      labelsString.value = item.subjectLabel.map(Number);
    } else {
      labelsString.value = item.subjectLabel.split(',').map(Number);
    }
    forms.value.subjectLabel = labelsString.value;
  
    formRef.value.resetFields(); // 清除表单校验状态
  };
  const formRef = ref(null);
  
  //弹出框表单校验证规则
  const rules = computed(() => {
    return {
      subjectType: [
        { required: true, message: '请选择题目类型', trigger: 'change' },
      ],
      subjectName: [
        { required: true, message: '请输入题目名称', trigger: 'blur' },
      ],
      subjectMajor: [
        { required: true, message: '请选择专业名称', trigger: 'change' },
      ],
      subjectLabel: [
        { required: true, message: '请选择题目标签', trigger: 'change' },
      ],
      optionA: [
        { required: true, message: '请输入选项A', trigger: 'blur' },
      ],
      optionB: [
        { required: true, message: '请输入选项B', trigger: 'blur' },
      ],
      optionC: [
         { required: true, message: '请输入选项C', trigger: 'blur' },
      ],
      optionD: [
        { required: true, message: '请输入选项D', trigger: 'blur' },
      ],
      optionE: [
        { required: true, message: '请输入选项E', trigger: 'blur' },
      ],
      optionF: [
         { required: true, message: '请输入选项F', trigger: 'blur' },
      ],
      subjectAnswer: [
        { required: true, message: '请输入题目答案', trigger: 'blur' },
      ],
      subjectLv: [
        { required: true, message: '请选择题目难度', trigger: 'change' },
      ],
    };
  });
  // 添加
  const tianjia = ref(false)
  //弹框取消按钮
  const quxiao = () => {
    tianjia.value = false;
    resetForm(); // 重置表单数据
  };
  
  // 弹框确认按钮
  const quer = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        // 将题目类型名称转换回编号
        switch (forms.value.subjectType) {
          case "判断题":
             forms.value.subjectType = 0;
            break;
          case "多选题":
            forms.value.subjectType = 1;
            break;
          case "单选题":
            forms.value.subjectType = 2;
            break;
        }
  
        // 将难度名称转换回编号
        switch (forms.value.subjectLv) {
          case "低":
            forms.value.subjectLv = 1;
            break;
          case "中":
            forms.value.subjectLv = 2;
            break;
          case "高":
            forms.value.subjectLv = 3;
            break;
        }
  
        // 判断试题id是否存在
        if (forms.value.subjectId) {
          updateSubjects();
         danxuan();
        } else {
          add();
          danxuan();
        }
        tianjia.value = false;
        resetForm(); // 重置表单数据
      } else {
        ElMessage.error('请正确输入试题信息');
        return false; // 阻止弹框关闭
      }
    });
  };
  
  const xuanze = ref([
    {nanId:2,nanName:'单选题'},
    {nanId:1,nanName:'多选题'},
    {nanId:0,nanName:'判断题'}
  ])
  
  
  const lxData = ref([
    {nanId:1,nanName:'低'},
    {nanId:2,nanName:'中'},
    {nanId:3,nanName:'高'}
  ])
  
  const resetForm = () => {
    
    forms.value = {}; // 重置 forms 数据
    forms.value.subjectName = '';
  
    labelsString.value = []; // 重置标签数据
    subjectImage.value = ''; // 清空图片字段
    formRef.value.resetFields(); // 清除表单校验状态
  
  };
  
  const forms = ref({})
  
  //定义弹框中试题标签类别集合
  const labelsString = ref([]);
  
  
    // 确保 subjectLabel 是一个数组
    if (Array.isArray(forms.value.subjectLabel)) {
      labelsString.value = forms.value.subjectLabel.join(',');
    } else {
      labelsString.value = '';
    }
  
  // 定义一个函数来获取当前时间并格式化
  const getCurrentTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    forms.value.changetime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  //删除按钮点击事件
  const shan=(item)=>{
    chu(item);
  }
  // 删除题目方法
  const item = ref({});
  // 删除题目方法
  const chu = async (subjectId) => {
    try {
      // 确保 subjectId 是一个数字
      if (typeof subjectId !== 'number' || isNaN(subjectId)) {
        ElMessage.error('题目ID无效');
        return;
      }
  
      // 弹出确认对话框
      await ElMessageBox.confirm(
        '确定要删除此题目吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      );
  
      // 用户点击“确定”后执行删除操作
      const response = await deleteSubject(subjectId);
  
      if (response.code === 200) {
        ElMessage.success('删除成功');
        danxuan();
      } else if (response.code === 400) {
        ElMessage.error('该题被使用，无法删除');
      } else {
        ElMessage.error('删除失败');
      }
      
    } catch (error) {
      // 如果用户点击“取消”，则不会进入这个 catch 块
      if (error !== 'cancel') {
        console.error('删除失败', error);
        ElMessage.error(error.response.data.msg);
      }
    }
  };
  
  
  
  // 修改题目
  const updateSubjects = async () => {
    getCurrentTime();
  
    // 确保 subjectLabel 是一个数组
    if (Array.isArray(forms.value.subjectLabel)) {
      labelsString.value = forms.value.subjectLabel.join(',');
    } else {
      labelsString.value = '';
    }
  
    // 将拼接好的字符串赋值给 forms.value.subjectLabel
    forms.value.subjectLabel = labelsString.value;
  
    let res = await updateSubject(forms.value);
    if (res.code === 200) {
      ElMessage.success('修改成功');
      await danxuan(); // 确保异步操作完成后再刷新列表
    } else {
      ElMessage.error('修改失败');
    }
  };
  
  //定义标签数据
  const subjectLabel = ref([]);
  
  //查询题目标签
  const selectSubjectLabelList = async () => {
    let result = await selectSubjectLabel();
    subjectLabel.value = result.data;
  };
  
  //定义专业数据
  const zhaun=ref([])
  //查询专业名称
  const selectSubjectMajorList = async () => {
    let result = await selectSubjectMajor();
    zhaun.value = result.data;
  };
  
  const subjecLabel=ref([])
  //查询所有的标签(知识点)
  const label=async()=>{
    const res = await selectAllQuestionType();
    subjecLabel.value=res.data
  }
  const difficulties=ref([
    {id:1,labelName:'低'},
    {id:2,labelName:'中'},
    {id:3,labelName:'高'}
  ])
  const  selectedDifficulty=ref(null)
  
  const selectDifficulty = (difficulty) => {
    selectedDifficulty.value = difficulty;
  };
  
  
  
  
  
  
  //当前页
  const pageNum=ref(1)
  //每页显示条数
  const pageSize=ref(10)
  //总条数
  const total=ref(50)
  //加载
  const loading=ref(false)
  //暂无数据
  const shuju=ref(null)
  //开启加载
  const startLoading = () => {
    loading.value = true
  }
  //关闭加载
  const endLoading = () => {
    loading.value = false
  }
  
  
  const xx=ref([])
  //父件传来的值
  const props = defineProps({
    someNumber: {
      type: Number,
      required: true
    },
  });
  
  
  
  //所有单选题目
  const sysSubiect=ref([]);
  
  //当每页条数发生了变化，调用此函数
  const onSizeChange = (size) => {
      pageSize.value = size
      danxuan()
  }
  //当前页码发生变化，调用此函数
  const onCurrentChange = (num) => {
      pageNum.value = num
      if(props.someNumber.data!=null){
        tt();
      }else{
        danxuan()
      }
      
  }


  //处理时间
const shijian=(time)=>{
   // 处理 createtime，推迟8个小时
   const processedItems = time.items.map(item => {
                if (item.createtime) {
                    const date = new Date(item.createtime);
                    date.setHours(date.getHours() + 16); // 推迟8个小时
                    item.createtime = date.toISOString().slice(0, 19).replace('T', ' ');
                }
                return item;
            });
            sysSubiect.value=processedItems
}
  
  const tt=async()=>{
    let params={
      data:props.someNumber.data,
      pageNum:pageNum.value,
      pageSize:pageSize.value,
      sysSubjectLv:props.someNumber.sysSubjectLv,
      sysSubjectType:1,
      sysSubiectMajor:props.someNumber.sysSubiectMajor
    }

    startLoading()
    let res=await selectSubjectByLabelId(params);
    if(res.code==200){

      endLoading()
      shijian(res.data)
     // sysSubiect.value = res.data.items;
      total.value = res.data.total;
    }else{
      endLoading()
      shuju.value='暂无数据'
      ErrorMessage('获取数据失败')
    }
    endLoading()
    
  
      sysSubiect.value = res.data.items;
      total.value = res.data.total;
    
   
  }
  
  watch(() => props.someNumber, (newValue, oldValue) => {

    tt();
  }, { deep: true });
  
  
  
  
  
  //获取所有单选题目
  const danxuan=async()=>{
  
    let params={
      pageNum:pageNum.value,
      pageSize:pageSize.value,
      subjectType:1
    }
    startLoading()
    const res=await selectSingleChoice(params)

    if(res.code==200){
        if(res.data.items!=0){
        
//sysSubiect.value=res.data.items
shijian(res.data)
  total.value=res.data.total

  endLoading()
  }else{

shuju.value='暂无数据'
    endLoading()
  }
    }else{
      endLoading()
      shuju.value='暂无数据'
      ErrorMessage('获取数据失败')
    }
  }
  
  onMounted(()=>{
    danxuan()
  })
  </script>
  
  
  <style lang='scss' scoped>
  
  
  .avatar-uploader-icon{
    margin: 70px;
  }
  .tt{
   border: 2px dashed #d9d9d9; /* 始终显示虚线边框 */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 250px;
     transition: border-color 0.3s;
  }
  .tt:hover{
    border-color: #409EFF; /* 鼠标悬停时改变边框颜色 */
  }
  .avatar-uploader {
    width: 250px;
    height: 250px;
  }
  .tu{
    width: 200px;
    height: 200px;
  }
  
  
  .common-course-Quest-item{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 15px 20px 25px;
    border-radius: 10px;
    box-shadow: 15px 5px 10px 2px rgba(0, 0, 0, 0.1);
  }
  .common-course-Quest-item-left{
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    justify-content: space-between;
    color: #333;
    font-size: 14px;
  }
  .common-course-Quest-item-ti{
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .common-course-Quest-item-title{
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .separator {
    width: 100%;
    height: 0.08px;
    background-color: #e3e3e3;
    margin: 1; 
  }
  .separator01 {
    width: 100%;
    height: 0.08px;
    background-color: #e3e3e3;
    margin: 1; 
  }
  .option-container{
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fabu{
    width: 60%;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;
  }
  .common-course-Quest-item-title_caozuo{
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .common-course-Quest-item-title_ti{
    height: 35px;
    line-height: 35px;
    margin-left: 20px;
  }
  .wushuju{
    margin-left: 20px;
  }
  </style>